<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1. 核心概念
            DOM 是将 HTML/XML 文档表示为节点树的编程接口，
            允许开发者通过 JavaScript 动态访问和操作文档内容、结构和样式。

    2. 关键特性
            树状结构：文档被建模为节点树
                document
                ├─ html
                │  ├─ head
                │  │  ├─ title
                │  │  └─ meta
                │  └─ body
                │     ├─ h1
                │     ├─ p
                │     └─ div
            标准化：W3C 制定的跨平台标准
            实时更新：DOM 修改会立即反映在页面渲染上

    3. 主要节点类型

        类型	    描述	        示例
        Document	整个文档	document
        Element	    HTML 元素	<div>, <p>
        Attr	    元素属性	class="title"
        Text	    文本节点	"Hello World"
        Comment	    注释	    <!-- comment -->

    4. 常用 API 示例
    // 查询元素
    const el = document.getElementById('header');

    // 创建节点
    const newDiv = document.createElement('div');

    // 修改内容
    el.textContent = 'New Title';

    // 样式操作
    el.style.color = 'red';

    // 事件监听
    el.addEventListener('click', () => {
    console.log('Clicked!');
    });

    // 类名操作
    el.classList.add('active');
</body>
</html>